<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Other | Animations</title>

    <style type="text/css">
      body {
        font: 10pt sans;
      }
      #mynetwork {
        width: 600px;
        height: 600px;
        border: 1px solid lightgray;
      }

      div.left {
        position: relative;
        float: left;
        width: 300px;
        border: 1px #c7c7c7 solid;
        height: 590px;
        padding: 5px;
      }

      div.right {
        padding-left: 10px;
        float: left;
        width: 600px;
      }

      div.bottom {
        position: absolute;
        bottom: 5px;
      }
    </style>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <script
      type="text/javascript"
      src="https://unpkg.com/alea@1.0.0/alea.js"
    ></script>

    <script type="module">
      import { generateRandomNodesAndEdges } from "../exampleUtil.js";

      var nodes = null;
      var edges = null;
      var offsetx,
        offsety,
        scale,
        positionx,
        positiony,
        duration,
        easingFunction,
        doButton,
        focusButton,
        showButton;
      var statusUpdateSpan;
      var finishMessage = "";
      var showInterval = false;
      var showPhase = 1;
      var amountOfNodes = 25;

      function destroy() {
        if (globalThis.network != null) {
          globalThis.network.destroy();
          globalThis.network = null;
        }
      }

      function updateValues() {
        offsetx = parseInt(document.getElementById("offsetx").value);
        offsety = parseInt(document.getElementById("offsety").value);
        duration = parseInt(document.getElementById("duration").value);
        scale = parseFloat(document.getElementById("scale").value);
        positionx = parseInt(document.getElementById("positionx").value);
        positiony = parseInt(document.getElementById("positiony").value);
        easingFunction = document.getElementById("easingFunction").value;
      }

      function draw() {
        destroy();
        statusUpdateSpan = document.getElementById("statusUpdate");
        doButton = document.getElementById("btnDo");
        focusButton = document.getElementById("btnFocus");
        showButton = document.getElementById("btnShow");

        // randomly create some nodes and edges
        var data = generateRandomNodesAndEdges(amountOfNodes);

        // create a network
        var container = document.getElementById("mynetwork");
        var options = {
          physics: {
            stabilization: {
              iterations: 1200,
            },
          },
        };
        globalThis.network = new vis.Network(container, data, options);

        // add event listeners
        globalThis.network.on("select", function (params) {
          document.getElementById("selection").innerText =
            "Selection: " + params.nodes;
        });
        globalThis.network.on("stabilized", function (params) {
          document.getElementById("stabilization").innerText =
            "Stabilization took " + params.iterations + " iterations.";
        });
        globalThis.network.on("animationFinished", function () {
          statusUpdateSpan.innerText = finishMessage;
        });
      }

      function fitAnimated() {
        updateValues();

        var options = {
          offset: { x: offsetx, y: offsety },
          duration: duration,
          easingFunction: easingFunction,
        };
        statusUpdateSpan.innerText = "Doing fit() Animation.";
        finishMessage = "Animation finished.";
        globalThis.network.fit({ animation: options });
      }

      function doDefaultAnimation() {
        updateValues();

        var options = {
          position: { x: positionx, y: positiony },
          scale: scale,
          offset: { x: offsetx, y: offsety },
          animation: true, // default duration is 1000ms and default easingFunction is easeInOutQuad.
        };
        statusUpdateSpan.innerText = "Doing Animation.";
        finishMessage = "Animation finished.";
        globalThis.network.moveTo(options);
      }

      function doAnimation() {
        updateValues();

        var options = {
          position: { x: positionx, y: positiony },
          scale: scale,
          offset: { x: offsetx, y: offsety },
          animation: {
            duration: duration,
            easingFunction: easingFunction,
          },
        };
        statusUpdateSpan.innerText = "Doing Animation.";
        finishMessage = "Animation finished.";
        globalThis.network.moveTo(options);
      }

      function focusRandom() {
        updateValues();

        var nodeId = Math.floor(Math.random() * amountOfNodes);
        var options = {
          // position: {x:positionx,y:positiony}, // this is not relevant when focusing on nodes
          scale: scale,
          offset: { x: offsetx, y: offsety },
          animation: {
            duration: duration,
            easingFunction: easingFunction,
          },
        };
        statusUpdateSpan.innerText = "Focusing on node: " + nodeId;
        finishMessage = "Node: " + nodeId + " in focus.";
        globalThis.network.focus(nodeId, options);
      }

      function startShow() {
        updateValues();
        if (showInterval !== false) {
          showInterval = false;
          showButton.value = "Start a show!";
          globalThis.network.fit();
        } else {
          showButton.value = "Stop the show!";
          focusRandom();
          setTimeout(doTheShow, duration);
          showInterval = true;
        }
      }

      function doTheShow() {
        updateValues();
        if (showInterval == true) {
          if (showPhase == 0) {
            focusRandom();
            showPhase = 1;
          } else {
            fitAnimated();
            showPhase = 0;
          }
          setTimeout(doTheShow, duration);
        }
      }

      draw();
    </script>
  </head>

  <body>
    <h2>Camera animations</h2>
    <div style="width: 700px; font-size: 14px">
      You can move the view around programmatically using the .moveTo(options)
      function. The options supplied to this function can also be (partially)
      supplied to the .fit() and .focusOnNode() methods. These are explained in
      the docs.
      <br /><br />
      The buttons below take the fields from the table when they can. For
      instance, the "Animate with default settings." takes the position, scale
      and offset while using the default animation values for duration and
      easing function. The focusOnNode takes everything except the position and
      the fit takes only the duration and easing function.
      <br /><br />
      Here you can see a full description of the options you can supply to
      moveTo:
    </div>
    <pre>
var moveToOptions = {
    position: {x:x, y:x},    // position to animate to (Numbers)
    scale: 1.0,              // scale to animate to  (Number)
    offset: {x:x, y:y},      // offset from the center in DOM pixels (Numbers)
    animation: {             // animation object, can also be Boolean
      duration: 1000,                 // animation duration in milliseconds (Number)
      easingFunction: "easeInOutQuad" // Animation easing function, available are:
    }                                   // linear, easeInQuad, easeOutQuad, easeInOutQuad,
}                                       // easeInCubic, easeOutCubic, easeInOutCubic,
                                        // easeInQuart, easeOutQuart, easeInOutQuart,
                                        // easeInQuint, easeOutQuint, easeInOutQuint
</pre
    >
    <div class="left">
      <table>
        <tr>
          <td>position x</td>
          <td>
            <input
              type="text"
              value="300"
              id="positionx"
              style="width: 170px"
            />
          </td>
        </tr>
        <tr>
          <td>position y</td>
          <td>
            <input
              type="text"
              value="300"
              id="positiony"
              style="width: 170px"
            />
          </td>
        </tr>
        <tr>
          <td>scale</td>
          <td>
            <input type="text" value="1.0" id="scale" style="width: 170px" />
          </td>
        </tr>
        <tr>
          <td>offset x</td>
          <td>
            <input type="text" value="0" id="offsetx" style="width: 170px" /> px
          </td>
        </tr>
        <tr>
          <td>offset y</td>
          <td>
            <input type="text" value="0" id="offsety" style="width: 170px" /> px
          </td>
        </tr>
        <tr>
          <td>duration</td>
          <td>
            <input
              type="text"
              value="1000"
              id="duration"
              style="width: 170px"
            />
            ms
          </td>
        </tr>
        <tr>
          <td>easingFunction</td>
          <td>
            <select id="easingFunction" style="width: 174px">
              <option value="linear">linear</option>
              <option value="easeInQuad">easeInQuad</option>
              <option value="easeOutQuad">easeOutQuad</option>
              <option value="easeInOutQuad" selected="selected">
                easeInOutQuad
              </option>
              <option value="easeInCubic">easeInCubic</option>
              <option value="easeOutCubic">easeOutCubic</option>
              <option value="easeInOutCubic">easeInOutCubic</option>
              <option value="easeInQuart">easeInQuart</option>
              <option value="easeOutQuart">easeOutQuart</option>
              <option value="easeInOutQuart">easeInOutQuart</option>
              <option value="easeInQuint">easeInQuint</option>
              <option value="easeOutQuint">easeOutQuint</option>
              <option value="easeInOutQuint">easeInOutQuint</option>
            </select>
          </td>
        </tr>
      </table>
      <div class="bottom">
        <span id="statusUpdate"></span><br />
        Examples:
        <input
          type="button"
          onclick="doAnimation();"
          value="Animate with above settings."
          style="width: 300px"
          id="btnDo"
        />
        <br />
        <input
          type="button"
          onclick="doDefaultAnimation();"
          value="Animate with default settings."
          style="width: 300px"
          id="btnDoDefault"
        />
        <br />
        <input
          type="button"
          onclick="fitAnimated();"
          value="Animated fit()."
          style="width: 300px"
          id="btnZoom"
        />
        <br />
        <input
          type="button"
          onclick="focusRandom();"
          value="Focus on random node."
          style="width: 300px"
          id="btnFocus"
        /><br />
        <input
          type="button"
          onclick="startShow();"
          value="Start a show!"
          style="width: 300px"
          id="btnShow"
        /><br />
      </div>
    </div>
    <div class="right">
      <div id="mynetwork"></div>

      <p id="selection"></p>
      <p id="stabilization"></p>
    </div>
  </body>
</html>
